<template>
  <el-container class="panel-block">
    <el-main>
      <el-table
        height="100%"
        class="sa-table"
        :data="table.data"
        stripe
        @selection-change="handleSelectionChange"
      >
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column v-if="modal.params.multiple" type="selection" width="55" />
        <el-table-column prop="id" label="ID" min-width="80"></el-table-column>
        <el-table-column label="商品信息" min-width="440">
          <template #default="scope">
            <goods-item
              :goods="{
                image: scope.row.image,
                title: scope.row.title,
                subtitle: scope.row.subtitle,
              }"
              mode="scoreShop"
            >
              <template #sku>
                <div class="sku" v-if="scope.row.is_sku">
                  <span>多规格</span>
                </div>
              </template>
            </goods-item>
          </template>
        </el-table-column>
        <el-table-column label="积分现金" min-width="200">
          <template #default="scope">
            <div class="sa-flex">
              {{ scope.row.score_price.score }}积分
              <div v-if="Number(scope.row.score_price.price)"
                >+￥{{ scope.row.score_price.price }}</div
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="score_sales" label="销量" min-width="100"></el-table-column>
        <el-table-column prop="score_stock" label="库存" min-width="100"></el-table-column>
        <el-table-column v-if="!modal.params.multiple" label="操作" width="80">
          <template #default="scope">
            <el-button class="is-link" type="primary" @click="onSingleSelect(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="sa-flex sa-row-between">
      <sa-pagination :pageData="pageData" @updateFn="getData" />
      <el-button v-if="modal.params.multiple" type="primary" @click="modalCallBack">确定</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'ScoreShopSelect',
  };
</script>

<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../app.service';
  import { usePagination } from '@/sheep/hooks';
  import GoodsItem from '@/app/shop/components/goods-item.vue';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const loading = ref(true);

  // 表格
  const table = reactive({
    data: [],
    selected: [],
  });

  const { pageData } = usePagination();

  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    const { data } = await api.scoreShop.select({
      page: pageData.page,
      list_rows: pageData.list_rows,
    });
    table.data = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    loading.value = false;
  }

  function handleSelectionChange(val) {
    table.selected = val;
  }

  function modalCallBack() {
    emit('modalCallBack', { event: 'confirm', data: table.selected });
  }

  function onSingleSelect(row) {
    emit('modalCallBack', {
      event: 'confirm',
      data: row,
    });
  }

  onMounted(() => {
    getData();
  });
</script>
